<template>
  <div>
    <nuxt keep-alive :keep-alive-props="{include: includePageNames}"/>
    <AuthOverlay v-if="$generalStore.isLoginOpen"/>
    <EditProfileOverlay v-if="$generalStore.isEditProfileOpen"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      includePageNames: ['user']
    }
  },
  computed: {
    $generalStore() {
      return this.$store.state.general
    },
    $userStore() {
      return this.$store.state.user
    }
  },
  watch: {
    '$generalStore.isLoginOpen': {
      handler(newVal) {
        this.$store.commit('general/bodySwitch', newVal)
      }
    },
    '$generalStore.isEditProfileOpen': {
      handler(newVal) {
        this.$store.commit('general/bodySwitch', newVal)
      }
    }
  },
  mounted() {
    this.$store.commit('general/bodySwitch', false)
    this.$store.commit('general/change_isEditProfileOpen', false)
    this.$store.commit('general/change_isLoginOpen', false)
    try {
      this.$store.dispatch('general/hasSessionExpired')
      this.$store.dispatch('general/getRandomUsers', 'suggested')
      this.$store.dispatch('general/getRandomUsers', 'following')

      if (this.$userStore.id) {
        this.$store.dispatch('user/getUser')
      }
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

<style scoped>

</style>
